<template>
	<view>
		<view style="display: flex;align-items: center;border-bottom: 2rpx solid #e9e9e9;margin-top: 1vh;">
			<view :style="{
	fontSize:baseFSZ/20+'vw'
		}" style="font-weight: bolder; width: 100%;box-sizing: border-box;">
				<!-- 解析后的富文本内容 -->
				<view style="width: 100%;
 display: flex;justify-content: space-between;align-items: center;">
					<view
						style="width: 3vw;height: 3vw;flex-shrink: 0;margin-right: 1vw; border-radius: 50%;background-color: #5d9cec;color: #fff;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 17px;">
						{{currentinfo.SortNum}}
					</view>
					<view style="width:100%;overflow: scroll;padding: 1vh 0;box-sizing: border-box;"
						v-html="parsedContent"></view>
					<view
						style="display: flex;flex-direction: column;align-items: center;height: 10vh;justify-content: space-around;margin-left: 1vw;flex-shrink: 0;">
	<image v-if="IsCollect"  src="../static/hsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else  src="../static/unsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
		
		<image v-if="!isNoVoice" @click="speak()" src="../static/bf.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else @click="speak()" src="../static/jy.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>

					</view>
				</view>


			</view>
		</view>
		<view style="width: 100%;overflow: scroll;">
			<view style="font-size: 22px;font-weight: bolder;margin-top: 1vh;color: #5d9cec;margin-bottom: 10px;">
				填空区:
			</view>
			<view style="width: 100%;font-size: 20px;margin: 0 auto;display: flex;align-items: center;"
				v-for="(field, index) in fields" :key="field.name">
				<view style="font-weight: bolder;color: #5d9cec;">
					填空{{index+1}}
				</view> <u--input :placeholder="`请输入${field.label}`" border="bottom"
					@input='debouncedAnswerInput($event,index+1)' v-model="formData[index]" clearable />
			</view>
		</view>


	</view>
</template>

<script>
	import {
		FillInQuestion,
		Collect
	} from "../api/api.js"
	import {
		debounce
	} from "../utils/common.js"
	export default {
		name: "tkt",
		props: ['baseFSZ', 'currentinfo', 'isNoVoice'],
		data() {
			return {
				formData: [],
				fields: [],
				IsCollect: false
			};
		},
		computed: {
			parsedContent() {
				let content = this.currentinfo.QuestionStem;

				// 1. 先处理图片占位符
				if (this.currentinfo.ImageUrl) {
					const imageUrls = this.currentinfo.ImageUrl.split(';').map(url => url.trim());
					const imagePlaceholderRegex = /\{Image(\d+)\}/g;
					let match;

					while ((match = imagePlaceholderRegex.exec(content)) !== null) {
						const placeholderIndex = parseInt(match[1], 10) - 1;
						if (placeholderIndex < imageUrls.length) {
							const baseUrl = `http://${uni.getStorageSync('config').ip}:${uni.getStorageSync('config').port}/Files/`;
							const fullImageUrl = `${baseUrl}${imageUrls[placeholderIndex]}`;
							const imgTag = `<img src="${fullImageUrl}" alt="Image${placeholderIndex + 1}">`;
							content = content.replace(match[0], imgTag);
						}
					}
				}

				// 2. 处理文本填空占位符
				const regex = /\{text\}/g;
				let matches = [];
				let textMatch;
				while ((textMatch = regex.exec(content)) !== null) {
					matches.push(textMatch.index);
				}

				let tempContent = content;
				for (let i = matches.length - 1; i >= 0; i--) {
					const replacement = `<text style="border-bottom:1px solid #5d9cec; box-sizing:border-box; color:#5d9cec;">
				${this.formData[i] || `填空${i + 1}`}
				</text>`;
					tempContent = tempContent.slice(0, matches[i]) + replacement + tempContent.slice(matches[i] + 6);
				}

				this.fields = matches.map((index, idx) => ({
					name: `input-${idx+1}`,
					label: `填空${idx + 1}`
				}));

				if (this.fields.length !== this.formData.length) {
					this.formData = new Array(this.fields.length).fill('');
				}

				return tempContent;
			}
		},
		created() {
			this.IsCollect = this.currentinfo.IsCollect

			let hxitems = this.currentinfo.FillInItems

			hxitems.forEach((e, i) => {
				this.formData[i] = hxitems[i].AnswerContent
			})

			this.debouncedAnswerInput = debounce(this.handleFill, 100);
		},
		computed: {
			parsedContent: {
				get() {
					return this.getParsedContent();
				},
				set() {} // 空setter用于支持v-model
			}
		},
		methods: {
			handleFill(e, index) {
				const targetIndex = index - 1;
				if (targetIndex >= 0 && targetIndex < this.formData.length) {
					// 直接赋值并使用$set确保响应式
					this.$set(this.formData, targetIndex, e);
					// 添加这行强制更新parsedContent
					this.$nextTick(() => {
						this.parsedContent = this.getParsedContent();
					});
				}
				// 保留防抖的API调用
				debounce(() => {
					FillInQuestion(this.currentinfo.Id, e, index)
				}, 500)();
			},
			// 新增方法分离解析逻辑
			getParsedContent() {
				// 将原parsedContent计算属性的逻辑移到这里
				let content = this.currentinfo.QuestionStem;

				// 1. 先处理图片占位符
				if (this.currentinfo.ImageUrl) {
					const imageUrls = this.currentinfo.ImageUrl.split(';').map(url => url.trim());
					const imagePlaceholderRegex = /\{Image(\d+)\}/g;
					let match;

					while ((match = imagePlaceholderRegex.exec(content)) !== null) {
						const placeholderIndex = parseInt(match[1], 10) - 1;
						if (placeholderIndex < imageUrls.length) {
							const baseUrl = `http://${uni.getStorageSync('config').ip}:${uni.getStorageSync('config').port}/Files/`;
							const fullImageUrl = `${baseUrl}${imageUrls[placeholderIndex]}`;
							const imgTag = `<img src="${fullImageUrl}" alt="Image${placeholderIndex + 1}">`;
							content = content.replace(match[0], imgTag);
						}
					}
				}

				// 2. 处理文本填空占位符
				const regex = /\{text\}/g;
				let matches = [];
				let textMatch;
				while ((textMatch = regex.exec(content)) !== null) {
					matches.push(textMatch.index);
				}

				let tempContent = content;
				for (let i = matches.length - 1; i >= 0; i--) {
					const replacement = `<text style="border-bottom:1px solid #5d9cec; box-sizing:border-box; color:#5d9cec;">
				${this.formData[i] || `填空${i + 1}`}
				</text>`;
					tempContent = tempContent.slice(0, matches[i]) + replacement + tempContent.slice(matches[i] + 6);
				}

				this.fields = matches.map((index, idx) => ({
					name: `input-${idx+1}`,
					label: `填空${idx + 1}`
				}));

				if (this.fields.length !== this.formData.length) {
					this.formData = new Array(this.fields.length).fill('');
				}

				return tempContent;
			},


			collect() {
				this.IsCollect = !this.IsCollect
				Collect(this.currentinfo.Id, this.IsCollect).then(res => {
					this.$emit('collect', this.IsCollect)
				})
			},
			speak() {

				// #ifdef APP-PLUS
				let text =
					`${this.currentinfo.QuestionStem}`
				this.$emit('speaker', text)
				// #endif


			}

		}
	}
</script>

<style lang="scss">
	.normal {
		width: 1.6vw;
		height: 1.6vw;
		border-radius: 50%;
		border: 1px solid #bababa;
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 1.6vw;
		justify-content: center;
		flex-shrink: 0;

		.ac {
			flex-shrink: 0;
			width: 1vw;
			height: 1vw;
			border-radius: 50%;
			background: #0075ff;

		}
	}
</style>